<template>
  <view class="home" v-if="homegoods.status==='success'">

    <!-- 轮播图 -->
    <Lampswiper :swiperlist="swiperlist" :swiperct="swiperct"> </Lampswiper>
    <!-- 搜索 -->
    <view class="homesearch">
      <Lampsearch></Lampsearch>
    </view>
    <Lampgrid> </Lampgrid>
    <!-- 写意生活 -->
    <Lampgeneral title="写意生活" class="xieyish">
      <view class="vul">
        <view class="vli" v-for="(item,index) in homegoods.xiye" :key="index"
         @click="tiaozhuan(item.id)">
          <view class="vleft">
            <image :src="item.image_url" mode="">
            </image>
          </view>
          <view class="vright">
            <view class="lititle">
              {{item.name}}
            </view>
            <view class="price">
              ￥{{item.unit_price}}
            </view>
            <u-button :custom-style="customStyle" :plain="true" :hair-line="false" shape="circle"
              :ripple="true" @click="tiaozhuan(item.id)">立即抢购</u-button>
          </view>
        </view>
      </view>
    </Lampgeneral>
    <!-- 热销推荐 -->
    <Lampgeneral title="热销推荐" class="hotrecommended">
      <view class="model_scrollx flex_row">
        <scroll-view class="uni-swiper-tab" scroll-x >
          <view class="scrollx_items" v-for="(item,index) in homegoods.hotlist" :key="index"
            :url="`/subPack/goods_detail/goods_detail?goods_id=${item.id}`">
            <navigator :url="`/subPack/goods_detail/goods_detail?goods_id=${item.id}`">
              <image :src="item.image_url" mode=""> </image>
              <view class="tgyx_title">
                {{item.name}}
              </view>
            </navigator>

          </view>

        </scroll-view>
      </view>
    </Lampgeneral>
    <!-- 人气热卖 -->
    <Lampgeneral title="人气热卖" class="Popularhot">
      <view class="vul">
        <navigator class="vli" v-for="(item,index) in homegoods.porhotlist" :key="index"
          :url="`/subPack/goods_detail/goods_detail?goods_id=${item.id}`">
          <view class="vtop">
            <image :src="item.image_url" mode=""> </image>
          </view>
          <view class="vbottom">
            <view class="lititle">
              {{item.name}}
            </view>
            <view class="prices">
              <view class="price">
                ￥{{item.unit_price}}
              </view>
              <view class="delprice">
                ￥{{item.discount_price}}
              </view>
            </view>

            <view class="cart">
              <view class="iconfonta icon-gouwuche1:before">

              </view>
            </view>

          </view>
        </navigator>
      </view>
    </Lampgeneral>
    <Lampfooter></Lampfooter>
  </view>
</template>
<script setup>
  import Lampswiper from "/src/components/Lampswiper/Lampswiper.vue"
  import Lampsearch from "/src/components/Lampsearch/Lampsearch.vue"
  import Lampgrid from "/src/components/Lampgrid/Lampgrid.vue"
  import Lampgeneral from "/src/components/Lampgeneral/Lampgeneral.vue"
  import Lampfooter from "/src/components/Lampfooter/Lampfooter.vue"
  import {
    goodsStore
  } from "../../store/goods.js"
  import {
    ref
  } from 'vue'
  //导入商品store
  const goodStore = goodsStore()
  //结构出首页数据
  const {homegoods} = goodStore
  //发送请求获取数据
  goodStore.getindexgoods()
  //定义传过去的轮播图组件样式
  const swiperct = ref({
    title: false,
    indicatorPos: "bottomCenter",
  })
  //跳转页面
  function tiaozhuan(goodid){
    uni.navigateTo({
      url: `/subPack/goods_detail/goods_detail?goods_id=${goodid}`
    })
  }
  //定义传过去的轮播图列表
  const swiperlist = ref([{
      image: 'https://17597658.s61i.faimallusr.com/2/AD0I2omyCBACGAAgm_nS4wUo_oy_oAQw7gU46AI.jpg',
      title: '昨夜星辰昨夜风，画楼西畔桂堂东'
    },
    {
      image: 'https://17597658.s61i.faimallusr.com/2/AD0I2omyCBACGAAgm_nS4wUozPLLuQcw7gU46AI.jpg',
      title: '身无彩凤双飞翼，心有灵犀一点通'
    },
    {
      image: 'https://17597658.s61i.faimallusr.com/2/AD0I2omyCBACGAAgnOnS4wUoqKbhogIw7gU46AI.jpg',
      title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
    }
  ])
  //立即抢购按钮样式
  const customStyle = ref({
    marginTop: '10rpx',
    width: '180rpx',
    height: '60rpx',
    color: 'red',
    border: "1rpx solid red"
  })

</script>

<style scoped lang="scss">
  .home {
    .homesearch {
      margin-top: 20rpx;

    }

    //写意生活css
    .xieyish {
      .vul {
        .vli:nth-child(n+2) {
          margin-top: 20px;
        }

        .vli {
          display: flex;
          height: 280rpx;
          border-radius: 5px;
          border: 1rpx solid #F3F3F3;

          .vleft {
            image {
              border-radius: 5px 0 0 5px;
              width: 400rpx;
              height: 280rpx;
            }
          }

          .vright {
            text-align: center;
            padding: 40rpx 30rpx;

            .lititle {
              color: #555555;
              font-size: 24rpx;

            }

            .price {
              margin-top: 25rpx;
              font-size: 35rpx;
              font-weight: 700;
              color: #f23030;
            }
          }
        }
      }
    }

    //热销推荐css
    .hotrecommended {
      .model_scrollx {
        display: flex;

        .uni-swiper-tab {
          white-space: nowrap;

          .scrollx_items {
            display: inline-block;
            width: 280rpx;
            height: 350rpx;
            margin: 0 10rpx;
            border: 1rpx solid #F3F3F3;
          }

          .scrollx_items:first-child {
            margin-left: 20rpx;
          }

          .scrollx_items:last-child {
            margin-right: 20rpx;
          }

          .scrollx_items image {
            width: 280rpx;
            height: 206rpx;
          }

          .tgyx_title {
            padding: 0 20rpx;
            margin-top: 20rpx;
            text-align: left;
            white-space: pre-line;
            font-size: 28rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
      }
    }

    //人气热卖
    .Popularhot {
      .vul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .vli {
          border: 1rpx solid #F3F3F3;
          width: 320rpx;
          height: 520rpx;
          border-radius: 10rpx;
          margin-bottom: 20rpx;
          box-shadow: 2rpx 30rpx 30rpx #dadada;
          position: relative;

          .vtop {
            image {
              border-radius: 10rpx 10rpx 0 0;
              width: 320rpx;
              height: 350rpx;
            }
          }

          .vbottom {
            padding: 0 20rpx;

            .lititle {
              color: #000000;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              font-size: 32rpx;
            }

            .prices {
              position: absolute;
              bottom: 20rpx;

              .price {
                display: inline-block;
                font-size: 30rpx;
                color: #f23030;
              }

              .delprice {
                display: inline-block;
                margin-left: 10rpx;
                left: 110rpx;
                font-size: 25rpx;
                text-decoration: line-through;
                color: #999999;
              }
            }

            .cart {
              position: absolute;
              bottom: 20rpx;
              right: 20rpx;
            }
          }
        }
      }
    }
  }
</style>